<template>
    <div>
        <h2>工作详情</h2>
        <Table border stripe :columns="columns" :data="tableData" style="overflow: visible">
        </Table>
        <finish v-model="finishOpen" :order-id="orderId" :id="jobId" @ok="reload"></finish>

    </div>
</template>

<script type="text/jsx">
    import finish from "_c/finish-form/finish-job-form";
    import {getJob} from "@/api";

    export default {
        name: "eng-job",
        components: {
            finish
        },
        data() {
            return {
                finishOpen: false,
                tableData: [],
                jobMap: {
                    0: "未维修",
                    1: "发出完成请求",
                    2: "任务完成"
                },
                columns: [
                    {title: "工作编号", key: "jobId", width: 100},
                    {title: "开始时间", key: "jobStartTime", width: 100, sortable: true},
                    {
                        title: "维修单", align: 'center',
                        children: [
                            {
                                title: "故障描述",
                                key: "detail"
                            },
                            {title: "维修单编号", key: "id", width: 100},
                            {title: "故障设备名称", key: "name", width: 100},
                            {title: "故障设备分类", key: "type", width: 100},
                            {title: "故障时间", key: "breakdownTime", width: 100, sortable: true},
                            {title: "生产时间", key: "productionTime", width: 100, sortable: true},
                            {title: "分派时间", key: "dispatchTime", width: 100, sortable: true},
                            {title: "报修时间", key: "createTime", width: 100, sortable: true},
                        ]
                    },
                    {
                        title: "状态",
                        key: "jobStatusStr",
                        width: 100,
                        render: (h, {row, index}) => {
                            console.log(JSON.stringify(row, null, 2))
                            let status = {
                                0: "default",
                                1: "processing",
                                2: "success",
                            }[row.jobStatus]
                            return <Badge status={status} text={row.jobStatusStr}/>
                        }
                    },
                    {
                        title: "操作",
                        render: (h, {row, index}) => {
                            if (row.jobStatus === 0) {
                                return <Button type="primary" size="small" style="margin-right: 5px"
                                               on-click={this.finish.bind(this, row)}>完成维修</Button>
                            } else {
                                return <div>暂无</div>
                            }

                        }
                    },


                ],
                orderId: "",
                jobId: 0,
            }
        },
        mounted() {
            this.reload()
        },
        methods: {
            reload() {
                getJob().then(d => {
                    let job = d.data.job

                    let data = {
                        jobId: job.id,
                        jobStartTime: job.startTime,
                        jobStatus: job.jobStatus,
                        jobStatusStr: this.jobMap[job.jobStatus],
                        ...d.data.order
                    }

                    this.tableData = [data]
                })
            },
            finish(row) {
                this.finishOpen = !this.finishOpen
                this.orderId = row.id
                this.jobId = row.jobId
            }
        }
    }
</script>

<style scoped lang="scss">
    .job-item {
        margin: 10px;
        border: 1px solid #e8eaec;
    }

    .job-title {
        font-size: 1.4em;
    }
</style>
